{% extends "youpu_base.html" %}

{% load i18n %}

{% block head_title %}登录{% endblock %}


{% block content %}

    <div id="tips" class="alert alert-warning" style="display: none">
        <span id="tip_content"></span>
    </div>


    <div class="row">
        <div class="col-md-6 offset-md-3">
            <h1>登录</h1>

            <form class="login" onsubmit="return check()" method="POST" action="{% url 'youpu:users_login' %}">
                {% csrf_token %}


                <div id="div_id_login" class="form-group"><label for="id_login" class="col-form-label  requiredField">
                    用户名<span class="asteriskField">*</span> </label>
                    <div class=""><input type="text" name="username" placeholder="用户名" autofocus="autofocus"
                                         maxlength="150" class="textinput textInput form-control" required
                                         id="id_login"></div>
                </div>
                <div id="div_id_password" class="form-group"><label for="id_password"
                                                                    class="col-form-label  requiredField">
                    密码<span class="asteriskField">*</span> </label>
                    <div class=""><input id="password" type="password" name="password" placeholder="密码"
                                         class="textinput textInput form-control" required id="id_password"></div>
                </div>

                <button class="primaryAction btn btn-primary" type="submit">登录</button>
                <a class="primaryAction btn btn-primary" href="{% url 'youpu:users_register' %}">注册</a>

            </form>


        </div>
    </div>
{% endblock %}

{% block js %}

    <script type="text/javascript">
        function check() {
            if (checkPassword()) {
                //如果所有的都可以通过检验，则允许向后台发起请求
                return true;
            } else
                return false;
        }

        function checkPasswordForm() {
            var password = $("#password").val();
            var reg_password = /^\w{8,20}$/;
            var flag = reg_password.test(password);
            if (!flag) {
                showFailMessage("密码长度为8-20位!");
            }
            return flag;
        }


        function showFailMessage(message) {
            document.getElementById("tips").style.display = "block";
            document.getElementById("tip_content").innerText = message;
            {# 让提示框只显示2秒钟 #}
            window.setTimeout(function () {
                document.getElementById("tip_content").innerText = "";
                document.getElementById("tips").style.display = "none";
            }, 2000)
        }

    </script>
{% endblock js %}